<!-- 标签管理组件 -->
<template>
  <div class="amap-page-container">
    <el-card>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>急救地图</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        <span class="btn">
          <!-- 新增按钮区域 -->
          <el-button type="primary" size="medium" @click="addLabelList">新增</el-button>
          <!-- 批量删除按钮 -->
          <el-button type="danger" size="medium" @click="allDeleteBtn()">批量删除</el-button>
        </span>
      </el-breadcrumb>
      <span class="spnBorder"></span>
      <!-- 表单区域 -->
      <div style="margin-left: 30px;">
        <el-form :inline="true" :model="queryInfo" ref="queryFromRef" class="demo-form-inline">
          <el-form-item label="站点名称" prop="stationName">
            <el-input v-model="queryInfo.stationName" placeholder="请输入站点名称" clearable></el-input>
          </el-form-item>
          <el-form-item class="itemBtns">
            <el-button type="primary" @click="searchBtn">查询</el-button>
            <el-button @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域  element-loading-background="rgba(0, 0, 0, 0.5)"-->
      <el-table
        :data="tableData"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        v-loading="pictLoading"
        element-loading-text="数据正在加载中..."
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="stationName" label="站点名称" width="150" align="center"></el-table-column>
        <el-table-column label="经纬度" width="220" align="center">
          <template slot-scope="scope">
            <span>X: {{scope.row.longitude}}&nbsp;</span>
            <span>Y: {{scope.row.latitude}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="hospitalLevelName" label="医院级别" align="center"></el-table-column>
        <el-table-column label="救治能力">
          <template slot-scope="scope">
            <p v-for="(item,index) in scope.row.rescueCode" :key="index">
              <img :src="'data:image/gif;base64,'+ item.img" style="vertical-align: middle;" alt />
              {{item.ability}}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              :inactive-value="0"
              :active-value="1"
              class="switchStyle"
              active-text="启用"
              inactive-text="停用"
              @change="isEnable(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini" @click="lookLabelData(scope.row)">查看</el-button>
            <el-button type="primary" plain size="mini" @click="editLabelData(scope.row)">修改</el-button>
            <el-button type="danger" plain size="mini" @click="deleteLabelData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 新增和修改对话框 -->
    <el-dialog
      :title="flag===true?'新增':'修改'"
      :visible.sync="addLableDialogVisible"
      width="60%"
      @close="resetLabelDate"
    >
      <!-- 表单区域 -->
      <el-form
        :label-position="labelPosition"
        label-width="120px"
        :model="addLabelData"
        ref="addLabeFormlRef"
        :rules="addLableRules"
      >
        <el-form-item label="站点名称" prop="stationName" class="inputWidth">
          <el-select
            v-model="addLabelData.stationName"
            filterable
            remote
            reserve-keyword
            @focus="stationList"
            :remote-method="remoteMethod"
            @change="monitorStation"
            :loading="pictLoading"
            :multiple-limit="1"
            :disabled="flags"
            placeholder="请输入站点名称"
          >
            <el-option
              v-for="item in optionss"
              :key="item.stationName"
              :label="item.stationName"
              :value="item.stationName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点编码" prop="stationCode" class="inputWidth inputRight">
          <el-input v-model="addLabelData.stationCode" placeholder="请输入站点编码"></el-input>
        </el-form-item>

        <el-form-item label="坐标经度" prop="longitude" class="inputWidth inputs">
          <el-input v-model="addLabelData.longitude"></el-input>
          <img
            @click="getMap"
            src="../../assets/navImg/经纬度-hover.png"
            style="height:30px;width:30px;"
            class="image"
            alt
          />
        </el-form-item>
        <el-form-item label="医院级别" prop="hospitalLevelName" class="inputWidth inputRight">
          <el-select
            v-model="addLabelData.hospitalLevelName"
            @change="selectModel($event)"
            placeholder="请选择医院级别"
          >
            <el-option
              v-for="item in optionsName"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="坐标纬度" prop="latitude" class="inputWidth">
          <el-input v-model="addLabelData.latitude"></el-input>
        </el-form-item>
        <el-form-item label="行政区" prop="regionName" class="inputWidth inputRight">
          <el-select
            v-model="addLabelData.regionName"
            @change="selectRegion($event)"
            placeholder="请选择行政区"
          >
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点位置" prop="stationLocation" style="width:97%;">
          <el-input v-model="addLabelData.stationLocation"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="stationAddress" style="width:97%;">
          <el-input v-model="addLabelData.stationAddress" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="救治能力" prop="rescueAbility">
          <!-- 多选区域 -->
          <el-checkbox-group
            v-model="addLabelData.rescueAbility"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="(city,index) in cities"
              :label="city.name"
              :key="index"
            >{{city.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="备注" prop="note" style="width:97%;">
          <el-input type="textarea" v-model="addLabelData.note"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区域 -->
      <div class="dialogBot" slot="footer">
        <el-button @click="addLableDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addLabelBtn" :disabled="isDisable">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看对话框 -->
    <el-dialog title="查看" :visible.sync="lookLableDialogVisible" width="60%">
      <!-- 表单区域 -->
      <el-form :label-position="labelPosition" label-width="120px" :model="addLabelData">
        <el-form-item label="站点名称" class="inputWidth">
          <el-input v-model="addLabelData.stationName" disabled></el-input>
        </el-form-item>
        <el-form-item label="站点编码" class="inputWidth inputRight">
          <el-input v-model="addLabelData.stationCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="坐标经度" class="inputWidth">
          <el-input v-model="addLabelData.longitude" disabled></el-input>
          <!-- <img
            src="../../assets/navImg/经纬度-hover.png"
            style="height:30px;width:30px;"
            class="image"
            alt
          />-->
        </el-form-item>
        <el-form-item label="医院级别" prop="hospitalLevelName" class="inputWidth inputRight">
          <el-select v-model="addLabelData.hospitalLevelName" disabled>
            <el-option
              v-for="item in optionsName"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="坐标纬度" class="inputWidth">
          <el-input v-model="addLabelData.latitude" disabled></el-input>
        </el-form-item>
        <el-form-item label="行政区" class="inputWidth inputRight">
          <el-select v-model="addLabelData.regionName" disabled>
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点位置">
          <el-input v-model="addLabelData.stationLocation" disabled></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="addLabelData.stationAddress" disabled></el-input>
        </el-form-item>
        <el-form-item label="救治能力">
          <!-- 多选区域 -->
          <el-checkbox-group
            v-model="addLabelData.rescueAbility"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="(city,index) in cities"
              :label="city.name"
              :key="index"
              disabled
            >{{city.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="图标展示">
          <img
            v-for="(item,index) in addLabelData.rescueCode"
            :key="index"
            :src="'data:image/gif;base64,'+ item.img"
          />
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="addLabelData.note" disabled></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区域 -->
      <div class="dialogBot" slot="footer">
        <el-button type="primary" @click="lookLableDialogVisible = false">关 闭</el-button>
        <!-- <el-button @click="lookLableDialogVisible = false">取 消</el-button> -->
      </div>
    </el-dialog>
    <!-- 地图显示 -->
    <div class="amap-page-container maps" @click="mapBtb" v-if="displayMap">
      <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      ></el-amap-search-box>
      <el-amap
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        class="amap-demo"
        :events="events"
      >
        <el-amap-marker v-for="(marker,i) in markers" :key="i" :position="marker"></el-amap-marker>
      </el-amap>
      <div class="el-icon-circle-close circleCss" @click="circleBtn"></div>
      <!-- <div class="toolbar">position: [{{ lng }}, {{ lat }}] address: {{ address }}</div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let self = this
    return {
      // 地图对象
      center: [113.62, 34.75],
      zoom: 12,
      markers: [],
      plugin: [
        // {
        //   pName: 'ToolBar' //工具条插件
        // }
      ],
      // 地图搜索条件
      searchOption: {
        city: '郑州',
        citylimit: true,
      },
      address: '', // 站点位置
      lng: 0, // 经度
      lat: 0, // 纬度
      events: {
        click(e) {
          let { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all',
          })
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress
                self.$nextTick()
              }
            }
          })
          setTimeout(function () {
            self.displayMap = false // 点击地址0.5s后隐藏地图
          }, 500)
        },
      },
      // 查询条件
      queryInfo: {
        page: 1,
        limit: 10,
        stationName: '',
      },
      // 医院级别
      optionsName: [],
      // 行政区划
      options: [],
      // 列表数据
      tableData: [],
      // 所有图标数组
      imageArr: [],
      // 数据总条数
      total: 0,
      // 默认设置新增和修改对话框隐藏
      addLableDialogVisible: false,
      labelPosition: 'right',
      // 对话框中站点模糊查询数据
      optionss: [],
      // 列表数据加载时loading
      pictLoading: false,
      // 新增和修改表单对象
      addLabelData: {
        id: '',
        stationName: '',
        stationCode: '',
        hospitalLevelName: '', // 医院级别
        hospitalLevel: '', // 医院级别code值
        longitude: '', // 经度
        latitude: '', // 纬度
        stationLocation: '',
        regionName: '', // 行政区名称
        regionCode: '', // 行政区编码
        rescueAbility: [], // 多选框默认选中的参数
        centerCode: [], // 救治能力编码
        rescueCode: '', // 图标
        stationAddress: '',
        note: '',
        state: '', // 启用状态
      },
      // 控制新增或修改对话框标题显示
      flag: true,
      // 控制站点名称是否置灰
      flags: true,
      // 对话框救治能力数据
      cities: [],
      // 控制查看对话框显示或隐藏
      lookLableDialogVisible: false,
      // 批量删除是的ids数组数据
      ids: [],
      // 救治能力参数对象
      code: 'station',
      // 地图显示或隐藏
      displayMap: false,
      // 表单验证
      addLableRules: {
        stationName: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
        stationCode: [
          { required: true, message: '请输入站点编码', trigger: 'blur' },
          { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' },
        ],
        hospitalLevelName: [{ required: true, message: '请选择医院级别', trigger: 'change' }],
        longitude: [{ required: true, message: '请输入站点经度', trigger: 'blur' }],
        latitude: [{ required: true, message: '请输入站点纬度', trigger: 'blur' }],
        stationLocation: [{ required: true, message: '请输入站点位置', trigger: 'blur' }],
        regionName: [{ required: true, message: '请选择行政区划', trigger: 'change' }],
        rescueAbility: [{ required: true, message: '请选择救治能力', trigger: 'change' }],
        stationAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
      },
      isDisable: false, // 避免表单重复提交
    }
  },
  created() {
    this.getLableList()
    this.getHospitalLevel()
    this.getStationName()
    this.getCheckAlldata()
  },
  methods: {
    onSearchResult(pois) {
      console.log(pois)
      // console.log(pois[0])
      this.markers = []
      let latSum = 0
      let lngSum = 0
      let markersArr = pois.slice(0, 1) // 截取数组第一个元素
      if (markersArr.length > 0) {
        markersArr.forEach((poi) => {
          // console.log(poi)
          let { lng, lat } = poi
          lngSum += lng
          latSum += lat
          this.markers.push([poi.lng, poi.lat])
        })
        let center = {
          lng: lngSum / markersArr.length,
          lat: latSum / markersArr.length,
        }
        this.center = [center.lng, center.lat]
        this.zoom = 15
      }
    },
    // 获取列表数据
    async getLableList() {
      this.pictLoading = true
      const { data: res } = await this.$http.get('/sys/station/tag_list_page', { params: this.queryInfo })
      // console.log(res)
      this.pictLoading = false
      if (res.errorCode !== 200) return this.$message.error('获取数据列表失败！')
      this.tableData = res.data.list
      this.total = res.data.totalCount
      // 数据过滤
      // res.data.list.map((v) => {
      // if (v.image !== null) {
      // v.images = v.image = v.image.split(',')
      // console.log(v.image) 当图标大于三个不显示
      // if (v.image.length > 3) {
      //   v.image = v.image.slice(0, 3)
      // }
      // return
      // }
      // })
    },
    // 监听表格是否启用按钮的变化
    async isEnable(rowData) {
      console.log(rowData)
      this.addLabelData.state = rowData.state
      this.addLabelData.id = rowData.id
      this.addLabelData.stationName = rowData.stationName
      this.addLabelData.stationCode = rowData.stationCode
      this.addLabelData.hospitalLevelName = rowData.hospitalLevelName
      this.addLabelData.longitude = rowData.longitude
      this.addLabelData.latitude = rowData.latitude
      this.addLabelData.stationLocation = rowData.stationLocation
      this.addLabelData.regionName = rowData.regionName
      this.addLabelData.rescueAbility = rowData.rescue
      this.addLabelData.centerCode = rowData.centerCode.split(',')
      this.addLabelData.stationAddress = rowData.stationAddress
      this.addLabelData.note = rowData.note
      const { data: res } = await this.$http.put('/sys/station/update', this.addLabelData)
      if (res.errorCode !== 200) return this.$message.error('状态修改失败！')
      this.$message.success('状态修改成功！')
      this.getLableList()
    },
    // 当前选中的页数
    handleCurrentChange(currentPage) {
      this.queryInfo.page = currentPage
      this.getLableList()
    },
    // 每页显示的数据条数
    handleSizeChange(pageSize) {
      this.queryInfo.limit = pageSize
      this.getLableList()
    },
    // 站点名称输入框获取焦点触发事件
    async stationList() {
      const { data: res } = await this.$http.get('/sys/station/station_name_list')
      // console.log(res.data)
      this.optionss = res.data
    },
    // 获取站点列表实现模糊查询
    async remoteMethod(query) {
      const { data: res } = await this.$http.get('/sys/station/station_name_list')
      if (query !== '') {
        // this.pictLoading = true
        setTimeout(() => {
          // this.pictLoading = false
          this.optionss = res.data.filter((item) => {
            return item.stationName.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.optionss = []
      }
    },
    // 监听站点名称的变化动态渲染数据
    monitorStation(e) {
      console.log(e)
      this.optionss.map((item) => {
        if (item.stationName == e) {
          console.log(item)
          this.addLabelData.id = item.id
          this.addLabelData.stationCode = item.stationCode
          this.addLabelData.hospitalLevelName = item.hospitalLevelName
          this.addLabelData.longitude = item.longitude
          this.addLabelData.latitude = item.latitude
          this.addLabelData.stationLocation = item.stationLocation
          this.addLabelData.regionName = item.regionName
          this.addLabelData.regionCode = item.regionCode
          // this.addLabelData.rescueAbility = item.rescue
          this.addLabelData.stationAddress = item.stationAddress
          this.addLabelData.note = item.note
        }
      })
    },
    // 获取医院级别菜单数据
    async getHospitalLevel() {
      const { data: res } = await this.$http.get('/sys/dict/getDict?code=hospital_level')
      // console.log(res.data)
      if (res.errorCode !== 200) return this.$message.error('获取医院级别数据失败！')
      this.optionsName = res.data
    },
    // 监听医院级别下拉菜单选中项
    selectModel(id) {
      console.log(id)
      this.optionsName.find((item) => {
        if (item.id === id) {
          this.addLabelData.hospitalLevelName = item.name
          this.addLabelData.hospitalLevel = item.code
        }
      })
    },
    // 获取行政区划菜单数据
    async getStationName() {
      const { data: res } = await this.$http.get('/sys/dict/getDict?code=region')
      if (res.errorCode !== 200) return this.$message.error('获取行政列表数据失败！')
      this.options = res.data
    },
    // 监听行政区下拉菜单选中项
    selectRegion(id) {
      // console.log(id)
      this.options.find((item) => {
        if (item.id === id) {
          this.addLabelData.regionName = item.name
          this.addLabelData.regionCode = item.code
        }
      })
    },
    // 获取对话框救治能力数据
    async getCheckAlldata() {
      const { data: res } = await this.$http.get('/sys/station/rescue')
      // console.log(res.data)
      if (res.errorCode !== 200) return this.$message.error('获取救治能力数据失败！')
      this.cities = res.data
    },
    // 监听救治能力中多选框的变化
    handleCheckedCitiesChange(checkVal) {
      console.log(checkVal)
      this.addLabelData.rescueAbility = checkVal
      // 救治能力编码数组
      let centerCodeArr = []
      for (let i = 0; i < checkVal.length; i++) {
        this.cities.find((item) => {
          if (item.name == checkVal[i]) {
            centerCodeArr.push(item.code)
          }
        })
      }
      // console.log(centerCodeArr)
      this.addLabelData.centerCode = centerCodeArr
    },
    // 点击新增按钮显示对话框
    addLabelList() {
      this.addLableDialogVisible = true
      this.flag = true
      this.flags = false
      this.addLabelData.stationName = ''
      this.addLabelData.stationCode = ''
      this.addLabelData.hospitalLevelName = ''
      this.addLabelData.longitude = ''
      this.addLabelData.latitude = ''
      this.addLabelData.stationLocation = ''
      this.addLabelData.regionName = ''
      this.addLabelData.regionCode = ''
      this.addLabelData.rescueAbility = []
      this.addLabelData.stationAddress = ''
      this.addLabelData.note = ''
      this.addLabelData.state = ''
    },
    // 实现编辑功能
    editLabelData(row) {
      console.log(row)
      this.addLableDialogVisible = true
      this.flag = false
      this.flags = true
      this.addLabelData.id = row.id
      this.addLabelData.stationName = row.stationName
      this.addLabelData.stationCode = row.stationCode
      this.addLabelData.hospitalLevelName = row.hospitalLevelName
      this.addLabelData.longitude = row.longitude
      this.addLabelData.latitude = row.latitude
      this.addLabelData.stationLocation = row.stationLocation
      this.addLabelData.regionName = row.regionName
      this.addLabelData.regionCode = row.regionCode
      this.addLabelData.rescueAbility = row.rescue
      this.addLabelData.centerCode = row.centerCode.split(',')
      this.addLabelData.stationAddress = row.stationAddress
      this.addLabelData.note = row.note
      this.addLabelData.state = row.state
      // this.addLabelData.jwDu = row.jwDu[0] + ' / ' + row.jwDu[1]
    },
    // 实现新增和修改功能
    addLabelBtn() {
      if (this.flag) {
        // 表单预检验
        this.$refs.addLabeFormlRef.validate(async (valid) => {
          // console.log(valid)
          if (!valid) return
          this.isDisable = true
          // 保留经纬度小数点后六位
          this.addLabelData.longitude = parseFloat(this.addLabelData.longitude).toFixed(6)
          this.addLabelData.latitude = parseFloat(this.addLabelData.latitude).toFixed(6)
          const { data: res } = await this.$http.put('/sys/station/update', this.addLabelData)
          // console.log(res)
          this.isDisable = false //执行请求后就不能点击了
          if (res.errorCode !== 200) return this.$message.error(res.message)
          this.addLableDialogVisible = false
          this.$message.success('添加数据成功！')
          this.getLableList()
        })
      } else {
        this.$refs.addLabeFormlRef.validate(async (valid) => {
          if (!valid) return
          this.isDisable = true
          this.addLabelData.longitude = parseFloat(this.addLabelData.longitude).toFixed(6)
          this.addLabelData.latitude = parseFloat(this.addLabelData.latitude).toFixed(6)
          const { data: res } = await this.$http.put('/sys/station/update', this.addLabelData)
          this.isDisable = false
          if (res.errorCode !== 200) return this.$message.error(res.message)
          this.addLableDialogVisible = false
          this.$message.success('修改数据成功！')
          this.getLableList()
        })
      }
    },
    // 新增表单重置功能
    resetLabelDate() {
      this.$refs.addLabeFormlRef.resetFields()
    },
    // 查看数据
    lookLabelData(row) {
      console.log(row)
      this.lookLableDialogVisible = true
      this.addLabelData.stationName = row.stationName
      this.addLabelData.stationCode = row.stationCode
      this.addLabelData.hospitalLevelName = row.hospitalLevelName
      this.addLabelData.longitude = row.longitude
      this.addLabelData.latitude = row.latitude
      this.addLabelData.stationLocation = row.stationLocation
      this.addLabelData.regionName = row.regionName
      this.addLabelData.rescueAbility = row.rescue
      this.addLabelData.rescueCode = row.rescueCode
      this.addLabelData.stationAddress = row.stationAddress
      this.addLabelData.note = row.note
    },
    // 实现单个删除功能
    async deleteLabelData(id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.put('/sys/station/tagDelete', { ids: id })
      // console.log(res)
      if (res.errorCode !== 200) return this.$message.error('删除数据失败！')
      this.$message.success('删除数据成功！')

      //此时已经实现删除操作，所以total的值需要减1，Math.ceil是向上取整，保证始终大于等于1
      const totalPage = Math.ceil((this.total - 1) / this.queryInfo.limit)
      //记录当前页码、记住删除最后一条数据时当前码是最后一页
      const pagenum = this.queryInfo.page > totalPage ? totalPage : this.queryInfo.page
      //实现跳转
      this.queryInfo.page = pagenum < 1 ? 1 : pagenum
      // console.log(this.queryInfo.page)
      // 重新渲染（后面方法改为你的方法名）
      this.getLableList()
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      // console.log(val)
      let ids = []
      val.map(function (v) {
        ids.push(v.id)
      })
      this.ids = ids
    },
    // 实现批量删除功能
    async allDeleteBtn() {
      // console.log(this.ids)
      if (this.ids.length == 0) return this.$message.info('请先勾选要删除的数据！')
      // let params = { ids: this.ids }
      const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.put('/sys/station/tagDelete', { ids: this.ids })
      if (res.errorCode !== 200) return this.$message.error('删除数据失败！')
      this.$message.success('删除数据成功！')
      // totalPage 表示为删除n条数据除以每页显示的条数后、得出最后一页页数
      const totalPage = Math.ceil((this.total - this.ids.length) / this.queryInfo.limit)
      const pagenum = this.queryInfo.page > totalPage ? totalPage : this.queryInfo.page
      //实现跳转
      this.queryInfo.page = pagenum < 1 ? 1 : pagenum
      this.getLableList()
    },
    // 查询功能
    searchBtn() {
      this.queryInfo.page = 1
      this.queryInfo.limit = 10
      this.getLableList()
    },
    // 实现重置功能
    resetBtn() {
      this.$refs.queryFromRef.resetFields()
      this.searchBtn()
    },
    // 获取地图位置信息
    mapBtb() {
      setTimeout(() => {
        this.addLabelData.regionName = ''
        this.addLabelData.regionCode = ''
        this.addLabelData.longitude = this.lng
        this.addLabelData.latitude = this.lat
        this.addLabelData.stationLocation = this.address
        let regionNameStr = '' // 地图行政区
        if (this.address.indexOf('管城回族区') != -1) {
          regionNameStr = this.address.substring(6, 11)
        } else {
          regionNameStr = this.address.substring(6, 9)
        }
        // this.addLabelData.regionName = regionNameStr
        this.options.map((item) => {
          if (item.name == regionNameStr) {
            this.addLabelData.regionName = item.name
            this.addLabelData.regionCode = item.code
          }
        })
      }, 1000)
    },
    // 控制地图显示
    getMap() {
      this.displayMap = true
    },
    // 控制地图隐藏
    circleBtn() {
      this.displayMap = false
      // 清除点标记
      this.markers = []
      this.lng = this.addLabelData.longitude
      this.lat = this.addLabelData.latitude
      this.address = this.addLabelData.stationLocation
    },
  },
}
</script>
<style lang="less" scoped>
.el-card {
  .spnBorder {
    display: block;
    margin: 15px 0;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  .el-pagination {
    float: right;
    margin: 10px 20px;
  }
}
.el-dialog {
  .dialogBot {
    text-align: right !important;
    padding-right: 3%;
  }
  .el-form-item {
    .inputs {
      // width: 70%;
      position: relative;
    }
    .image {
      position: absolute;
      top: 6px;
      right: 6px;
      display: inline-block;
      margin: 0 20px;
      width: 80px;
      height: 40px;
      vertical-align: middle;
      cursor: pointer;
    }
    .el-select {
      width: 100%;
    }
  }
}
.maps {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 500px;
  z-index: 6666;
  .circleCss {
    position: absolute;
    top: 35px;
    right: -10px;
    font-size: 30px;
    cursor: pointer;
    z-index: 8888;
    background-color: #eee;
    border-radius: 50%;
  }
}
.amap-demo {
  height: 450px;
}
</style>